 <style type="text/css">
  	/*表格菜单中需要使用的css*/
  	.hide{display:none}
  </style>
  
  		<div class="layui-hide" id='enian-nav-bar'>
  			<!-- 默认选中菜单左侧 -->
  			<a type='menu' data-url="" ></a>
  			<!--<a data-url="">上一页</a>-->
  			<a data-url="">自定义菜单</a>
  			
  		</div>
  		
  		<!-- 自定义 -->
		<div class="layui-hide" id='enian-nav-bar-custom'>
  			<a data-href="">上一页</a>
  			<a data-href="">上一页</a>
  			<a data-href="">自定义菜单</a>
  		</div>

      	<!--<iframe id='son_window' src="" width="100px" height="100px"></iframe>-->
		

		
		<button class="layui-btn layui-btn-primary layui-btn-sm  up-all" >添加主菜单</button>
		<button class="layui-btn layui-btn-primary layui-btn-sm  add-default-group" >添加已有</button>
		<button class="layui-btn layui-btn-primary layui-btn-sm " id='setMenuLeft_btn_del_check'>删除选中</button>
		
		<!--<button class="layui-btn layui-btn-primary down-all">全部展开</button>
		<button class="layui-btn layui-btn-primary get-checked">获取选中</button>-->
		
		<table class="layui-table layui-form"  id="test-tree-table"></table>
		<blockquote class="layui-elem-quote">注意：<br>1.当所有菜单都删除的时候，首页菜单会显示默认菜单。<br>2.当地址不填写的时候，点击菜单不会有任何效果。<br>3.设置完成后，请刷新当前页面才可看到左侧菜单更改后的效果</blockquote>
		
		
		<!-- 主菜单增加已有的菜单分组-模板 -->
		<script type="text/html" id='setMenuLeft_add-default-groupTpl'>
			<table class="layui-table" lay-data="{url:'/test/table/demo1.json', id:'test3'}" lay-filter="test3">
			  <thead>
			    <tr>
			      <th lay-data="{type:'checkbox'}">ID</th>
			      <th lay-data="{field:'id', width:80, sort: true}">ID</th>
			      <th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
			      <th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th>
			      <th lay-data="{field:'sex', width:80, edit: 'text'}">性别</th>
			      <th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th>
			      <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th>
			    </tr>
			  </thead>
			</table>
		</script>
		
		<!-- 主菜单增加/修改模板 -->
		<script type="text/html" id='setMenuLeft_addMenuTpl'>
			<form class="layui-form layui-form-pane" lay-filter='setMenuLeft_addMenu' style="margin: 5px;">
			  
			  <div class="layui-form-item">
			    <label class="layui-form-label">名字</label>
			    <div class="layui-input-block">
			      <input type="text" name="title" lay-verify="required" placeholder="菜单名称" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  
			  	<div class="layui-form-item">
		            <label for="" class="layui-form-label">选择图标</label>
		            <div class="layui-input-block">
		                <input type="text" id="setMenuLeft_iconPicker" lay-filter="setMenuLeft_iconPicker" class="layui-input">
		           		<div class="layui-form-mid layui-word-aux " style="cursor: pointer;" id="setMenuLeft_del_img" > 点此清除图标</div>
		                

		            </div>
		                <input type="text" id='setMenuLeft_iconPicker_input_img' name='img' style="display: none;">
		            
		        </div>
		        
			  <!-- 更新时使用 id -->
		      <input type="text"  name='id' value='{{d.id}}' style="display: none;">
			  
			  <div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn" lay-submit=""  data-type='{{d.type}}' lay-filter="setMenuLeft_addMenu_submit">保存</button>
			    </div>
			    
			  </div>
			</form>
		</script>
		
		
		<!-- 子菜单增加/修改模板 -->
		<script type="text/html" id='setMenuLeft_addSonMenuTpl'>
			<form class="layui-form layui-form-pane"  lay-filter='setMenuLeft_addMenu' style="margin: 5px;">
			  
			  <div class="layui-form-item">
			    <label class="layui-form-label">名字</label>
			    <div class="layui-input-block">
			      <input type="text" name="title" lay-verify="required" placeholder="二级菜单名称" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  
			  	<div class="layui-form-item">
		            <label for="" class="layui-form-label" >选择图标</label>
		            <div class="layui-input-block">
		                <input type="text" id="setMenuLeft_iconPicker" lay-filter="setMenuLeft_iconPicker" class="layui-input">

		           		<div class="layui-form-mid layui-word-aux " style="cursor: pointer;" id="setMenuLeft_del_img" > 点此清除图标</div>
		            	
		            </div>
		                <input type="text" id='setMenuLeft_iconPicker_input_img' name='img' style="display: none;">
		        </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">地址</label>
			    <div class="layui-input-block">
			      <input type="text" name="url" lay-verify="" placeholder="例如：/index/app.html" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  
			  <!-- 父id -->
		      <input type="text" id='setMenuLeft_iconPicker_input' name='note' value='{{d.note}}' style="display: none;">
			  <!-- 更新时使用 id -->
		      <input type="text"  name='id' value='{{d.id}}' style="display: none;">
			  
			  <!--<div class="layui-form-item">
			    <label class="layui-form-label">排序</label>
			    <div class="layui-input-inline">
			      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
			    </div>
			  </div> -->
		
				
			  
			  <div class="layui-form-item">
			    <label class="layui-form-label">类型</label>
			    <div class="layui-input-block">
			      <select name="opentype" lay-filter="aihao">
			        <option value="0">本页打开</option>
			        <option value="1">新窗打开</option>
			      </select>
			    </div>
			    <!--<div class="layui-form-mid layui-word-aux"> <a href="">什么是数据表模板？</a></div>-->
			  </div>
			
		
			  
			  
			  <div class="layui-form-item">
			    <button class="layui-btn" lay-submit="" data-type='{{d.type}}' lay-filter="setMenuLeft_addMenu_submit">保存</button>
			  </div>
			</form>
			
			
		</script>

		<script>
			
			layui.config({
				base: '/static/layui_extends/', 
			})
			layui.use(['treetable','iconPicker','form','laytpl'],function(){
//				var data=[
//				 {"id":1,"pid":0,"name":"分组1",'open':true,"img":'<i class="layui-icon layui-icon-set"></i>'},
//				 {"id":4,"pid":1,'name':'二级菜单1','img':'<i class="layui-icon layui-icon-set"></i>','type':0,'checked':'','url':'链接1'},
//				 {"id":3,"pid":1,'name':'二级菜单1','img':'','type':0,'checked':'','url':'链接1'},
//				 
//				 {"id":9,"pid":0,"name":"设置"},
//				 {"id":11,"pid":9,'name':'二级菜单1','img':'','type':0,'checked':'','url':'链接1'},
//				 {"id":2,"pid":0,"name":"设置"},
//				 {"id":5,"pid":2,'name':'菜单设置','img':'','type':1,'checked':'','url':'链接1'},
//				 {"id":6,"pid":2,'name':'二级菜单1','img':'','type':0,'checked':'','url':'链接1'},
//				];
				var data= {$data};
				var $ = layui.$;
				var form = layui.form,layer = layui.layer,laytpl = layui.laytpl,iconPicker=layui.iconPicker;
				var treetable ='';
				var layer_index;
//				if (self == top) { 
//					var iframe_url= location.href;
//					$("iframe").attr('src',iframe_url+'?PAGE_TYPE=2');
//				}else{
//					console.log('*9999333')
//				}
				
				
				treetable_render(data);
				//treetable_reload()
				
				
				
				
				treetable.on('treetable(add)',function(e){
					layer.msg('添加操作');
					// console.log(e.item.id)
					//return;
					var d = {'type':'addSonMenu','note':e.item.id};
					editWindow("#setMenuLeft_addSonMenuTpl",d)
					form.render()
				})
				
				treetable.on('treetable(order)',function(e){
					layer.msg('修改排序操作');
					// console.log(e.item.id)

//					var d = {'type':'addSonMenu','note':e.item.id};
//					editWindow("#setMenuLeft_addSonMenuTpl",d)
//					form.render()
				})
				
				treetable.on('treetable(edit)',function(d){
					layer.msg('编辑操作');
					if(d.item.pid==0){
							var type = {'type':'updateMenu','id':d.item.id};
							editWindow("#setMenuLeft_addMenuTpl",type,d.item)
					}else{
							var type = {'type':'updateSonMenu','id':d.item.id};
							editWindow("#setMenuLeft_addSonMenuTpl",type,d.item)
					}
					console.dir(d);
				})
				
				//添加新菜单
				$('.up-all').click(function(){
					var d = {'type':'addMenu'};
					editWindow("#setMenuLeft_addMenuTpl",d)
					form.render()
				})
				//增加默认菜单
				$('.add-default-group').click(function(){
					layer.confirm('此操作会增加系统默认菜单，是否继续操作？',function(){
						$.ajax({
								type:"get",
								url:"{:url('',['t'=>'data'])}?type=8",
								async:true,
								success:function(e){
									if(e.code==1){
										layer.msg('加载成功');
										treetable_reload()
									}
								}
							});
					})
				})
				$('.down-all').click(function(){
					treetable.all('down');
				})
				
				$('#setMenuLeft_btn_del_check').click(function(){
					var  checked =treetable.all('checked');
					// console.log(treetable.all('checked'))
					if(checked.ids.length==0){
						layer.msg('请先勾选需要删除的数据')
						return;
					}
					layer.confirm('确定要删除所有选中的数据吗？',function(){
						$.ajax({
							type:"post",
							url:"{:url('setMenuLeft',['t'=>'data'])}?type=5",
							data:{ids:checked.ids},
							async:true,
							success:function(e){
								if(e.code!=0){
									treetable_reload()
									layer.msg('删除成功的个数为：'+e.count+'个');
								}else{
									layer.msg('删除失败');
								}
							}
						});
					})
				})
				
				$('.get-checked').click(function(){
					console.dir(treetable.all('checked'));
				})
				
				form.on('switch(status)',function(data){
					layer.msg('监听状态操作');
					console.dir(data);
				})
				form.on('submit(setMenuLeft_addMenu_submit)',function(data){
					// console.log($(this).data('type'))
					var type=$(this).data('type');
					if(type=='addMenu'){
						type =1;
					}else if(type=='addSonMenu'){
						type =2;
					}else if(type=='updateMenu'){
						type =3;
					}else if(type=='updateSonMenu'){
						type =4;
					}
					$.ajax({
						type:"post",
						url:"{:url('setMenuLeft',['t'=>'data'])}?type="+type,
						data:data.field,
						async:true,
						success:function(e){
							if(e.code!=0){
								layer.msg('操作成功');
								treetable_reload()
							}else{
								layer.msg('操作失败');
							}
						}
					});
					
					console.dir(data);
					return false;
				})
				//listing_order
				
				//回车事件绑定
			    $('.listing_order').bind('keypress', function(event) {
			        if (event.keyCode == "13") {   
			        	var that =$(this);
			        	//$(this).data('id')
			        	//$(this).val()
			        	// console.log(that.val())
			            $.ajax({
							type:"post",
							url:"{:url('setMenuLeft',['t'=>'data'])}?type=7",
							data:'id='+that.data('id')+'&field=order&value='+that.val(),
							async:true,
							success:function(e){
								if(e.code==1){
									layer.msg('修改成功')
									that.blur()
								}else{
									layer.msg('修改失败')
									treetable_reload()
								}
							}
						});
			        }
			    });

				//-------------------------------------------------------------------------
				//重新加载菜单
				function treetable_reload(){
					layer.close(layer_index)
					enianAdmin.reload()
					
					//window.location.reload()
//					$.ajax({
//							type:"post",
//							url:"{:url('setMenuLeft')}?type=6",
//							//data:{ids:checked.ids},
//							async:true,
//							success:function(e){
//								treetable_render(e.data);
//							}
//						});
				}
				
				
				//渲染菜单
				function treetable_render(data){
					treetable = layui.treetable;
					treetable.render({
						elem: '#test-tree-table',
						data: data,
						field: 'title',
						is_checkbox: true,
						/*icon_val: {
							open: "&#xe619;",
							close: "&#xe61a;"
						},
						space: 4,*/
						cols: [
							{
								//field: 'img',
								title: '图标',
								width: '5%',
								template: function(item){
									return '<i class="layui-icon '+item.img+'"></i>   '
								}
								
							},
							{
								// field: 'order',
								title: '排序',
								width: '8%',
								template: function(item){
									return '<input type="text"  data-id="'+item.id+'" lay-filter="order" value="'+item.order+'" class="layui-input listing_order" style="width:50px">'
								}
								
							},
							{
								field: 'title',
								title: '菜单标题',
								width: '20%',
							},
							
//							{
//								field: 'id',
//								title: 'ID',
//								width: '5%'
//							},
							{
								title: '类型',
								width: '10%',
								template: function(item){
									var msg='';
									
									if(item.type==0){
										msg='内部打开'
									}else if(item.type==1){
										msg='新窗打开'
									}
									return msg;
								}
							},
							
							{
								field: 'url',
								title: '地址',
								width: '25%',
								
								
							},
							{
								field: 'actions',
								title: '操作',
								width: '30%',
								template: function(item){
									var tem = [];
									
									
	//								if(item.pid > 0){
	//									tem.push('<a class="set-attr">设置属性</a>');
	//								}
									
									tem.push('<a lay-filter="edit" class="layui-btn  layui-btn-normal layui-btn-sm" style="cursor: pointer;">编辑</a>');
									if(item.pid == 0){
										tem.push('<a class="add-child layui-btn layui-btn-warm layui-btn-sm" lay-filter="add" style="cursor: pointer;">添加子级</a>');
									}
									return tem.join('')
								},
							},
						]
					});
			
				}
				
				//加载编辑窗口
				function editWindow(elem,d,oldData){
					
					laytpl($(elem).html()).render(d, function(html){
						layer_index = layer.open({
						  type: 1,
						  skin: '', //加上边框
						  area: ['400px', '340px'], //宽高
						  content: html
						});
					});
					
					iconPicker.render({
		                // 选择器，推荐使用input
		                elem: '#setMenuLeft_iconPicker',
		                // 数据类型：fontClass/unicode，推荐使用fontClass
		                type: 'fontClass',
		                // 是否开启搜索：true/false
		                search: false,
		                // 是否开启分页
		                page: true,
		                // 每页显示数量，默认12
		                limit: 8,
		                // 点击回调
		                click: function (data) {
		                	$('#setMenuLeft_iconPicker_input_img').val(data.icon)
		                    // console.log(data);
		                }
		            });
		            
		            /**
		             * 选中图标 （常用于更新时默认选中图标）
		             * @param filter lay-filter
		             * @param iconName 图标名称，自动识别fontClass/unicode
		             */
		            if(oldData){
		            	oldData['opentype']=oldData.type
		            	form.val("setMenuLeft_addMenu", oldData)
		            	// console.log(oldData)
		            	//选中图标 （常用于更新时默认选中图标）
      					iconPicker.checkIcon('setMenuLeft_iconPicker', oldData.img);
		            }else{
		            	iconPicker.checkIcon('setMenuLeft_iconPicker', '无');
		            }
		            
		            //监听删除图标
		            $('#setMenuLeft_del_img').click(function(){
		            	// console.log('清除图标');
		            	$('#setMenuLeft_iconPicker_input_img').val('');
		            	layer.msg('已清除图标')
		            	iconPicker.checkIcon('setMenuLeft_iconPicker', '无');
		            })
				}
				
				
			})
			//console.log($data)
			
		</script>
